<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算属性</title>
<script type="text/javascript" src=https://vuejs.org/js/vue.js></script>
</head>
<body>

	<div id=root>
	姓<input v-model="f1">
	<br>名<input v-model="f2">
	<br>全名：<div >{{fullname}}</div>
	<br>修改次数：<div>{{count}}</div>
	
	</div>
<!-- 	<div id=root v-html="msg"></div> -->
	<script type="text/javascript">
	new Vue({
		el:"#root"
// 		,template:'<h1>hh {{msg}}</h1>'
		,data:{
			f1:""
			,f2:""
			,count:0
			
		}
		//计算属性
		,computed:{
			fullname:function(t){
			return this.f1+''+this.f2;
			}
		}
		//监听器
		,watch:{
			fullname:function(){
				this.count++;
			}
		}
	})
	</script>
</body>
</html>